<template>
	<view>

		<u-popup :show="show" @close="close" @open="open" mode="center" bgColor="transparent">
			<view class="popup-box">
				<view style="width: 600rpx;height: 640rpx;">
					<view class="popup-top">
						<view class="popup-title">求购道具</view>
						<view class="close-btn" @click="close()">
							<image src="/static/icon-images/close.png" mode="widthFix"></image>
						</view>
					</view>

					<view style="position: relative;">
						<view>
							<view class="input-title">选择道具</view>
							<view class="input-field input-box" style="justify-content: space-between;" @click="check">
								<view class="input-text1">{{checked||checkList[0].text}}</view>
								<u-icon name="arrow-down" color="#e2e8f0" size="16"></u-icon>
							</view>
						</view>
						<view class="check-box" v-if="checkShow">
							<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
								<view class="check-item" v-for="(item,index) in checkList" :key="index"
									@click="checkItem(item)">
									{{item.text}}
								</view>
							</scroll-view>

						</view>
					</view>

					<view>
						<view class="input-title">数量</view>
						<view class="input-field input-box">
							<input type="number" class="input-text1" v-model="number" placeholder="输入数量"
								@input="validateInput" />
						</view>
					</view>
					<view>
						<view class="input-title">单价(能量)</view>
						<view class="input-field input-box">
							<input class="input-text1" v-model="price" placeholder="输入单价" />
						</view>
					</view>

					<view class="submit-btn" @click="submit">确认求购</view>

				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		productSave
	} from '@/api/market.js'
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				scrollTop: 0,
				checked: '',
				checkShow: false,
				type: 1, // 1=1%合成石 2=2%合成石 3=5%合成石 4=10合成石% 5=20%合成石 6=50%合成石，8=积分,9=宝箱
				price: null, //单价
				number: null, //数量
				checkList: [{
						type: 1,
						text: '1%合成石'
					}, {
						type: 2,
						text: '2%级合成石'
					},
					{
						type: 3,
						text: '5%合成石'
					},
					{
						type: 4,
						text: '10%合成石'
					},
					{
						type: 5,
						text: '20%合成石'
					},
					{
						type: 6,
						text: '50%合成石'
					},
					{
						type: 8,
						text: '积分'
					}, {
						type: 9,
						text: '宝箱'
					}
				]
			};
		},
		methods: {
			validateInput() {
				// 仅允许整数
				this.number = this.number.replace(/[^\d]/g, '');
			},
			open() {
				this.number = null
				this.price = null
				this.$emit('update:show', true)
			},
			close() {
				this.$emit('update:show', false)
			},
			check() {
				this.checkShow = !this.checkShow
			},
			checkItem(item) {
				this.type = item.type
				this.checked = item.text
				this.checkShow = false
			},
			async submit() {
				if (!this.number) {
					uni.showToast({
						title: '请输入数量',
						icon: 'none'
					})
					return
				}
				if (!this.price) {
					uni.showToast({
						title: '请输入单价',
						icon: 'none'
					})
					return
				}
				let data = {
					number: this.number,
					price: this.price,
					type: this.type
				}
				let res = await productSave(data)
				uni.showToast({
					title: '求购成功',
					icon: 'none'
				})
				this.$emit('update:show', false)
			}
		}
	}
</script>

<style lang="scss">
	.popup-box {
		background: linear-gradient(135deg, #0a1a3a 0%, #050a1a 100%);
		border: 1rpx solid rgba(255, 255, 255, 0.15);
		border-radius: 20rpx;
		overflow-y: auto;
		padding: 30rpx;
	}

	.popup-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.popup-title {
		font-weight: 700;
		font-size: 38rpx;
		color: #e2e8f0;
	}

	.close-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.15);

		image {
			display: block;
			width: 28rpx;
			height: 28rpx;
		}
	}

	.input-title {
		font-size: 28rpx;
		color: #e2e8f0;
		line-height: 1;
		margin: 20rpx 0;
	}

	.input-box {
		display: flex;
		align-items: center;
		min-height: 85rpx;
	}

	.input-text1 {
		font-size: 32rpx;
		color: #e2e8f0;
		line-height: 1;
	}

	.submit-btn {
		background: #ff6b6b;
		color: white;
		border: none;
		border-radius: 20rpx;
		padding: 20rpx 40rpx;
		font-weight: 600;
		font-size: 36rpx;
		box-shadow: 0 4rpx 20rpx rgba(255, 62, 62, 0.6);
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 35rpx;
	}

	.check-box {
		margin-top: 5rpx;
		position: absolute;
		z-index: 2;
		width: 100%;
		border-radius: 10rpx;
		background-color: #1f2937;
	}

	.scroll-Y {
		padding-left: 20rpx;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		// height: 70rpx;
		font-size: 32rpx;
		color: #e2e8f0;
	}

	.check-item {
		// height: 400rpx;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 70rpx;
		font-size: 32rpx;
		color: #e2e8f0;
	}
</style>